<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="./lib/testHelper.js"></script>
    <script src="../dist/zrender.js"></script>
    <style>
        html {
            font-family: Arial;
            font-size: 14px;
        }
        .control {
            position: fixed;
            width: 180px;
            bottom: 0;
            top: 0;
            right: 0;
            z-index: 99999;
            font-family: Arial, Helvetica, sans-serif;
            padding: 10px;
            background: #dee;
            box-shadow: 0 0 5px #888;
            font-size: 12px;
            overflow: auto;
        }
        .control-block {
            padding-left: 5px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 5px;
        }
        button {
            margin: 2px;
        }
        .storage-key {
            color: #888;
        }
        #storage-container {
            padding: 5px 0;
        }
        label {
            padding-left: 5px;
            padding-right: 5px;
        }
    </style>
</head>
<body>

    <script>
        var _updaters = {};
    </script>

    STATE are stored to URL hash to enable to compare <br>
    SVG renderer and Canvas renderer in <a href="-cases.html">-cases.html</a>.

    <div class="control">

        <div class="control-block">
            STATE: <br>
            <div id="storage-container"></div>
        </div>



        <div class="control-block">
            <label>textRotation:</label>
            <button onclick="startTextRotation();">Start</button>
            <button onclick="stopTextRotation();">Stop</button>
            <button onclick="updateToURL('textRotation', 0.5 * Math.PI);">0.5 * Math.PI</button>
            <button onclick="updateToURL('textRotation', 0.1 * Math.PI);">0.1 * Math.PI</button>
            <button onclick="updateToURL('textRotation', -0.3 * Math.PI);">-0.3 * Math.PI</button>
            <button onclick="removeToURL('textRotation');">Remove</button>
            <script>
            _updaters.textRotation = function () {
                var textRotation = _storage.textRotation;
                for (var i = 0; i < _shapes1.length; i++) {
                    var shape = _shapes1[i];
                    shape.getTextContent().attr({
                        rotation: textRotation
                    });
                }
                for (var i = 0; i < _shapes2.length; i++) {
                    var shape = _shapes2[i];
                    shape.getTextContent().attr({
                        rotation: clone(textRotation)
                    });
                }
            };
            </script>
        </div>

        <!-- <div class="control-block">
            <label>textOrigin:</label>
            <button onclick="updateToURL('textOrigin', 'center');">'center'</button>
            <button onclick="updateToURL('textOrigin', [150, 70]);">[150, 70] (right-bottom-corner)</button>
            <button onclick="removeToURL('textOrigin');">Remove</button>
            <script>
            _updaters.textOrigin = function () {
                var textOrigin = _storage.textOrigin;

                for (var i = 0; i < _shapes1.length; i++) {
                    var shape = _shapes1[i];
                    shape.getTextContent().attr({
                        originX: textOrigin ? textOrigin[0] : 0,
                        originY: textOrigin ? textOrigin[1] : 0
                    });
                }
                for (var i = 0; i < _shapes2.length; i++) {
                    var shape = _shapes2[i];
                    shape.getTextContent().attr({
                        originX: textOrigin ? textOrigin[0] : 0,
                        originY: textOrigin ? textOrigin[1] : 0
                    });
                }
            };
            </script>
        </div> -->

        <div class="control-block">
            <label>background:</label>
            <button onclick="updateToURL('hasBg', 1);">Add</button>
            <button onclick="removeToURL('hasBg');">Remove</button>
            <script>
            _updaters.hasBg = function () {
                var hasBg = _storage.hasBg;
                for (var i = 0; i < _shapes1.length; i++) {
                    var shape = _shapes1[i];
                    shape.getTextContent().attr({
                        style: {
                            borderRadius: 3,
                            backgroundColor: 'rgba(0, 255, 0, 0.3)',
                            borderColor: '#191933',
                            borderWidth: 2,
                            boxShadowBlur: 5,
                            boxShadowColor: '#1099ee',
                            boxShadowOffsetX: 2,
                            boxShadowOffsetY: 5
                        }
                    });
                }
                for (var i = 0; i < _shapes2.length; i++) {
                    var shape = _shapes2[i];
                    shape.getTextContent().attr({
                        style: {
                            borderRadius: 8,
                            backgroundColor: 'rgba(0, 255, 0, 0.3)',
                            borderColor: '#191933',
                            borderWidth: 2,
                            boxShadowBlur: 5,
                            boxShadowColor: '#1099ee',
                            boxShadowOffsetX: 2,
                            boxShadowOffsetY: 5
                        }
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>textDistance:</label>
            <button onclick="updateToURL('textDistance', 15);">15</button>
            <button onclick="updateToURL('textDistance', -20);">-20</button>
            <button onclick="removeToURL('textDistance');">Remove</button>
            <script>
            _updaters.textDistance = function () {
                var dist = _storage.textDistance;
                for (var i = 0; i < _shapes1.length; i++) {
                    var shape = _shapes1[i];
                    shape.setTextConfig({
                        distance: dist
                    });
                }
                for (var i = 0; i < _shapes2.length; i++) {
                    var shape = _shapes2[i];
                    shape.setTextConfig({
                        distance: dist
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>textPosition:</label>
            <button onclick="updateToURL('textPosition', [10, 20]);">[10, 20]</button>
            <button onclick="updateToURL('textPosition', [-10, -20]);">[-10, -20]</button>
            <button onclick="removeToURL('textPosition');">Remove</button>
            <script>
            _updaters.textPosition = function () {
                var textPosition = _storage.textPosition;
                for (var i = 0; i < _shapes1.length; i++) {
                    var shape = _shapes1[i];
                    shape.setTextConfig({
                        position: textPosition
                    });
                }
                for (var i = 0; i < _shapes2.length; i++) {
                    var shape = _shapes2[i];
                    shape.setTextConfig({
                        position: textPosition
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>padding:</label>
            <button onclick="updateToURL('padding', [10, 20, 30, 40]);">[10, 20, 30, 40]</button>
            <button onclick="updateToURL('padding', 50);">50</button>
            <button onclick="removeToURL('padding');">Remove</button>
            <script>
            _updaters.padding = function () {
                for (var i = 0; i < _shapes1.length; i++) {
                    var shape = _shapes1[i];
                    shape.getTextContent().attr({
                        style: {
                            padding: clone(_storage.padding)
                        }
                    });
                }
                for (var i = 0; i < _shapes2.length; i++) {
                    var shape = _shapes2[i];
                    shape.getTextContent().attr({
                        style: {
                            padding: clone(_storage.padding)
                        }
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>textAlign:</label>
            <button onclick="updateToURL('textAlign', 'left');">'left'</button>
            <button onclick="updateToURL('textAlign', 'center');">'center'</button>
            <button onclick="updateToURL('textAlign', 'right');">'right'</button>
            <button onclick="removeToURL('textAlign');">Remove</button>
            <script>
            _updaters.textAlign = function () {
                var textAlign = _storage.textAlign;
                for (var i = 0; i < _shapes1.length; i++) {
                    var shape = _shapes1[i];
                    shape.getTextContent().attr({
                        style: {
                            align: textAlign
                        }
                    });
                }
                for (var i = 0; i < _shapes2.length; i++) {
                    var shape = _shapes2[i];
                    shape.getTextContent().attr({
                        style: {
                            align: textAlign
                        }
                    });
                }
            };
            </script>
        </div>

        <div class="control-block">
            <label>verticalAlign:</label>
            <button onclick="updateToURL('verticalAlign', 'top');">'top'</button>
            <button onclick="updateToURL('verticalAlign', 'middle');">'middle'</button>
            <button onclick="updateToURL('verticalAlign', 'bottom');">'bottom'</button>
            <button onclick="removeToURL('verticalAlign');">Remove</button>
            <script>
            _updaters.verticalAlign = function (verticalAlign) {
                var verticalAlign = _storage.verticalAlign;
                for (var i = 0; i < _shapes1.length; i++) {
                    var shape = _shapes1[i];
                    shape.getTextContent().attr({
                        style: {
                            verticalAlign: verticalAlign
                        }
                    });
                }
                for (var i = 0; i < _shapes2.length; i++) {
                    var shape = _shapes2[i];
                    shape.getTextContent().attr({
                        style: {
                            verticalAlign: verticalAlign
                        }
                    });
                }
            };
            </script>
        </div>
<!--
        <div class="control-block">
            <label>transformText:</label>
            <button onclick="updateToURL('transformText', true);">Enable</button>
            <button onclick="removeToURL('transformText');">Remove</button>
            <script>
            </script>
        </div> -->

        <div class="control-block">
            <label>Add '\n' at char index 3 (only for plain text rect):</label>
            <button onclick="updateToURL('addLineBreak', true);">Add</button>
            <button onclick="removeToURL('addLineBreak');">Remove</button>
            <script>
            _updaters.addLineBreak = function () {
                var verticalAlign = _storage.verticalAlign;
                for (var i = 0; i < _shapes1.length; i++) {
                    var shape = _shapes1[i];
                    var text = shape.__zr_test_text;
                    text = text.substr(0, 3) + '\n' + text.substr(3, text.length - 1);
                    shape.getTextContent().attr({
                        style: {
                            text: text
                        }
                    });
                }
            };
            </script>
        </div>
<!--
        <div class="control-block">
            <label>Add truncate (only for red rect):</label>
            <button onclick="updateToURL('truncate', {outerWidth: 50, outerHeight: 40, ellipsis: '...'});">{outerWidth: 50, outerHeight: 40, ellipsis: '...'}</button>
            <button onclick="updateToURL('truncate', {outerWidth: 5, outerHeight: 20, ellipsis: '...', placeholder: '-'});">{outerWidth: 5, outerHeight: 20, ellipsis: '...', placeholder: '-'});</button>
            <button onclick="removeToURL('truncate');">Remove</button>
            <script>
            _updaters.truncate = function () {
                var truncate = clone(_storage.truncate);
                for (var i = 0; i < _shapes1.length; i++) {
                    var shape = _shapes1[i];
                    var text = '';
                    for (var j = 0; j < 5; j++) {
                        text += shape.__zr_test_text;
                    }
                    shape.getTextContent().attr({
                        style: {
                            text: text,
                            truncate: truncate
                        }
                    });
                }
            };
            </script>
        </div>
 -->
    </div>


    <div id="main1" style="width:1000px;height:700px;"></div>
    <div id="main2" style="width:1500px;height:2800px;margin:0;"></div>


    <script type="text/javascript">
        var clone = zrender.util.clone;
        var encodeHTML = testHelper.encodeHTML;
        var _timer;
        var _storage = {};
        var _shapes2 = [];
        var _shapes1 = [];
        var _rotating = false;


        function init() {
            initBase();
            testHelper.initURLStorage(updateView);
        }

        function initBase() {
            var posList = [
                'left', 'right', 'top', 'bottom',
                'inside',
                'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
            ];

            var zr1 = zrender.init(document.getElementById('main1'), {
                renderer: window.__ZRENDER__DEFAULT__RENDERER__
            });

            zrender.util.each(posList, function (textPos, idx) {
                var text = textPos + '中文';
                var shape = new zrender.Rect({
                    position: [(idx % 3) * 220, 120 * Math.floor(idx / 3)],
                    scale: [1, 1],
                    style: {
                        fill: zrender.color.random(),
                    },
                    textContent: new zrender.Text({
                        style: {
                            text: text
                        }
                    }),
                    textConfig: {
                        position: textPos
                    },
                    __zr_test_text: text,
                    shape: {
                        x: 100,
                        y: 50,
                        width: 150,
                        height: 70
                    }
                });
                _shapes1.push(shape);
                zr1.add(shape);
            });

            var zr2 = zrender.init(document.getElementById('main2'), {
                renderer: window.__ZRENDER__DEFAULT__RENDERER__
            });

            zrender.util.each(posList, function (textPos, idx) {
                var text = textPos;

                var shape = new zrender.Rect({
                    position: [(idx % 2) * 300, 150 * Math.floor(idx / 2)],
                    style: {
                        fill: '#eeaaff'
                    },
                    textContent: new zrender.Text({
                        style: {
                            text: [
                                '{j|' + text + '}',
                                '我是 Rect Text, textDistance: 20',
                                '整体的 textAlign verticalAlign 取默认值'
                            ].join('\n'),
                            fill: 'red',
                            font: '10px Arial',
                            rich: {
                                j: {
                                    font: '16px Arial',
                                    fill: '#922889',
                                    verticalAlign: 'top'
                                }
                            }
                        }
                    }),
                    textConfig: {
                        position: textPos
                    },
                    shape: {
                        x: 220,
                        y: 100,
                        width: 260,
                        height: 100
                    }
                });
                _shapes2.push(shape);
                zr2.add(shape);
            });
        }

        window.updateToURL = function (key, value) {
            testHelper.updateToHash(key, clone(value));
        };

        window.removeToURL = function (key) {
            // key with undefined value will be removed after JSON.stringify();
            testHelper.updateToHash(key, void 0);
            // force reload whether search is changed.
            location.reload();
        };

        function updateView() {
            updateStorage();
            updateStorageView();

            for (var updaterName in _updaters) {
                if (_updaters.hasOwnProperty(updaterName)) {
                    // Do not set attr, test the default cases.
                    if (!_storage.hasOwnProperty(updaterName)) {
                        continue;
                    }
                    _updaters[updaterName]();
                }
            }

            nextRotate();
        }

        function updateStorage() {
            _storage = testHelper.getAllFromHash();
        }

        function updateStorageView() {
            var html = [];
            for (var key in _storage) {
                if (_storage.hasOwnProperty(key)) {
                    html.push(
                        '<span class="storage-key">' + encodeHTML(key) + '</span>:&nbsp;&nbsp;'
                        + encodeHTML(JSON.stringify(_storage[key]))
                    );
                }
            }
            var dom = document.getElementById('storage-container');
            dom.innerHTML = html.join('<br>');
        }

        function nextRotate() {
            if (_rotating) {
                setTimeout(function () {
                    var textRotation = _storage.textRotation || 0;
                    textRotation += 0.01;
                    textRotation %= Math.PI * 2;
                    testHelper.updateToHash('textRotation', textRotation);
                }, 50);
            }
        }

        function startTextRotation() {
            _rotating = true;
            nextRotate();
        };

        function stopTextRotation() {
            _rotating = false;
        };


        init();


    </script>


</body>
</html>